<template>
  <div class="interval-num-input">
    <el-input
      v-model="v_value[0]"
      style="width: 100%"
      :placeholder="minPlaceholder"
      @blur="trmNum"
    ></el-input>
    <span>{{ gapLabel }}</span>
    <el-input
      v-model="v_value[1]"
      style="width: 100%"
      :placeholder="maxPlaceholder"
      @blur="trmNum"
    ></el-input>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => [null, null],
    },
    minPlaceholder: {
      type: String,
      default: '请输入',
    },
    maxPlaceholder: {
      type: String,
      default: '请输入',
    },
    gapLabel: {
      type: String,
      default: '~',
    },
  },
  data() {
    return {
      v_value: [null, null],
    };
  },
  model: {
    prop: 'value',
    event: 'inputs',
  },
  watch: {
    value: {
      deep: true,
      handler() {
        this.v_value = this.value;
      },
    },
    v_value: {
      deep: true,
      immediate: true,
      handler() {
        this.$emit('inputs', this.v_value);
      },
    },
  },
  methods: {
    trmNum() {
      if (this.v_value[0] && this.v_value[1]) {
        if (isNaN(this.v_value[0])) {
          this.v_value.splice(0, 1, 0);
        }
        if (isNaN(this.v_value[1])) {
          this.v_value.splice(1, 1, 0);
        }
      }

      if (this.v_value[0] >= this.v_value[1]) {
        let a = this.v_value[1];
        let b = this.v_value[0];
        this.v_value.splice(0, 1, a);
        this.v_value.splice(1, 1, b);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.interval-num-input {
  display: flex;
  gap: 16px;
  align-items: center;
}
</style>
